<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS 优先级示例</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="main-content" class="container">
    <!-- 内联样式特异性最高 -->
    <p class="text" style="color: yellow;">这是一个段落。应用了内联样式和类选择器。</p>
    <!-- 类选择器特异性高于元素选择器 -->
    <p class="box highlight">这是另一个段落。应用了类选择器。</p>
    <!-- !important 覆盖所有优先级 -->
    <p class="important-text">这是第三个段落。应用了!important。</p>
  </div>
</body>
</html>